<template>
  <DefaultLayout>
    <div class="space-y-8">
      <h1 class="text-4xl font-bold">社区交流</h1>
      
      <!-- 讨论区 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-6">
          <div v-for="post in posts" :key="post.id" class="card">
            <div class="flex items-center space-x-4 mb-4">
              <img :src="post.author.avatar" :alt="post.author.name" class="w-10 h-10 rounded-full" />
              <div>
                <h3 class="font-semibold">{{ post.author.name }}</h3>
                <p class="text-sm text-gray-500">{{ post.date }}</p>
              </div>
            </div>
            <h2 class="text-xl font-semibold mb-2">{{ post.title }}</h2>
            <p class="text-gray-600 mb-4">{{ post.content }}</p>
            <div class="flex items-center space-x-4 text-gray-500">
              <button class="flex items-center space-x-1 hover:text-primary">
                <span>👍</span>
                <span>{{ post.likes }}</span>
              </button>
              <button class="flex items-center space-x-1 hover:text-primary">
                <span>💬</span>
                <span>{{ post.comments }}</span>
              </button>
              <button class="flex items-center space-x-1 hover:text-primary">
                <span>🔄</span>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="space-y-6">
          <div class="card">
            <h2 class="text-xl font-semibold mb-4">热门话题</h2>
            <div class="space-y-2">
              <a
                v-for="topic in topics"
                :key="topic.id"
                href="#"
                class="block p-2 hover:bg-gray-50 rounded-lg"
              >
                <span class="text-primary">#</span>
                {{ topic.name }}
                <span class="text-sm text-gray-500">({{ topic.count }})</span>
              </a>
            </div>
          </div>
          
          <div class="card">
            <h2 class="text-xl font-semibold mb-4">活跃用户</h2>
            <div class="space-y-4">
              <div v-for="user in activeUsers" :key="user.id" class="flex items-center space-x-3">
                <img :src="user.avatar" :alt="user.name" class="w-8 h-8 rounded-full" />
                <div>
                  <h3 class="font-semibold">{{ user.name }}</h3>
                  <p class="text-sm text-gray-500">{{ user.contributions }} 贡献</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '../layouts/DefaultLayout.vue'

const posts = [
  {
    id: 1,
    author: {
      name: '张三',
      avatar: '/images/avatar-1.jpg'
    },
    date: '2024-01-15',
    title: '分享一个提高 Cursor 使用效率的小技巧',
    content: '最近发现了一个很实用的快捷键组合，可以大大提高代码编辑效率...',
    likes: 42,
    comments: 15
  },
  {
    id: 2,
    author: {
      name: '李四',
      avatar: '/images/avatar-2.jpg'
    },
    date: '2024-01-14',
    title: 'Cursor AI 功能使用心得',
    content: '经过一段时间的使用，总结了一些 AI 功能的使用技巧...',
    likes: 38,
    comments: 12
  }
]

const topics = [
  { id: 1, name: 'AI编程', count: 128 },
  { id: 2, name: '快捷键', count: 96 },
  { id: 3, name: '插件开发', count: 64 },
  { id: 4, name: '性能优化', count: 48 }
]

const activeUsers = [
  {
    id: 1,
    name: '张三',
    avatar: '/images/avatar-1.jpg',
    contributions: 156
  },
  {
    id: 2,
    name: '李四',
    avatar: '/images/avatar-2.jpg',
    contributions: 142
  },
  {
    id: 3,
    name: '王五',
    avatar: '/images/avatar-3.jpg',
    contributions: 98
  }
]
</script> 